<!--suppress ALL -->
<script setup>
//阿里图标
import { RouterView } from 'vue-router';
import { ref,onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
const userstore=useUserStore()
const user=userstore.user
import { selectMenu } from '@/api/user';
const menus=ref(null)
const selectmenu=async()=>{menus.value=(await selectMenu(user)).data.data}
import router from "@/router";

const clickA = (ins) => {
  router.push(ins)
}

onMounted(()=>{
  selectmenu();
})
const iconSize=ref(24)
</script>

<template>
  <h3>常用入口</h3>
  <el-container class="icons">
    <!-- 侧边导航 -->
    <template v-for="(menu, index) in menus" :key="index">
      <el-button v-for="(minu,index) in menu.menu" v-if="menu.menu.length > 1" :key="index"
                 :index="minu.jump" class="alwaysI" @click="clickA(minu.jump)">
        <el-icon :size="iconSize">
          <component v-if="minu.icon!=null" :is="minu.icon" />
          <component v-else :is="menu.icon" />
        </el-icon>
        {{ minu.name }}
      </el-button>
    </template>
  </el-container>

</template>

<style lang="scss">
.icons{
  display: flex;
  /* height: 80px; */
  flex-wrap: wrap;
  justify-content: center;
}
.alwaysI{
    width: 100px;
    height: 56px;
    margin: 10px;
}
.el-button p {
    font-size: 14px;
    margin-top: 5px;
}
</style>
